import React, { useEffect, useState, useRef } from "react";
import { Form, Button, DatePicker, Input, Select, Divider, Space } from "antd";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import type { DataNode } from "antd/es/tree";
import dayjs from "dayjs";
import SearchFormWarpper from "@/components/SearchFormWarpper";
import FormWarpper from "@/components/FormWarpper";
import ReadonlyFormWarpper from "@/components/ReadonlyFormWarpper";
import TreeWarpper from "@/components/tree";
import PaginationWarpper from "@/components/PaginationWarpper";
import ModalDialog from "@/components/modalDialog";
import EmptyWarpper from "@/components/EmptyWarpper";
import "./index.less";

export const AddComponent = () => {
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();
  const [readonlyForm, setReadonlyForm] = useState({});
  const [username, setUsername] = useState("");
  const [checkedTree, setCheckedTree] = useState([]);

  // 搜索配置
  const searchFormSetting = {
    span: 6,
    // menuRow: true,
    // expand: true,
    // maxFormLength: 3,
    columns: [
      {
        name: "username",
        label: "用户名",
        placeholder: "请输入用户名",
        allowClear: true,
        // slot: true,
        // component: <DatePicker style={{ width: "100%" }} />,
        // rules: [{ required: true, message: "请输入用户名!" }],
        // disabled: true,
      },
      {
        name: "phone",
        label: "手机号",
        placeholder: "请输入手机号",
        formType: "input",
        // rules: [{ required: true, message: '请输入手机号!'}]
      },
      {
        name: "city",
        label: "城市",
        formType: "select",
        // multiple: true,
        showSearch: true,
        dicData: [
          { value: "nanjing", label: "南京" },
          { value: "shanghai", label: "上海" },
          { value: "beijing", label: "北京" },
        ],
        slot: true,
        component: (
          <Select
            placeholder="请选择"
            allowClear
            options={[
              { value: "nanjing", label: "南京" },
              { value: "shanghai", label: "上海" },
              { value: "beijing", label: "北京" },
            ]}
            onChange={(e) => onchange(e)}
          />
        ),
        // disabled: true,
      },
      {
        name: "campany",
        label: "部门",
        formType: "select",
        dicData: [
          { value: "zongcaiban", label: "总裁办" },
          { value: "qihuabu", label: "企划部" },
          { value: "renshibu", label: "人事部门" },
        ],
        disPlay: !username || username == "nanjing" ? "block" : "none",
      },
      {
        name: "isCascader",
        label: "级联选择",
        formType: "cascader",
        dicData: [
          {
            value: "zhejiang",
            label: "Zhejiang",
            children: [
              {
                value: "hangzhou",
                label: "Hangzhou",
                children: [
                  {
                    value: "xihu",
                    label: "West Lake",
                  },
                ],
              },
            ],
          },
          {
            value: "jiangsu",
            label: "Jiangsu",
            children: [
              {
                value: "nanjing",
                label: "Nanjing",
                children: [
                  {
                    value: "zhonghuamen",
                    label: "Zhong Hua Men",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        name: "datePicker",
        label: "日期时间",
        formType: "datePicker",
        allowClear: true,
        showTime: true,
        // picker: 'week', // week | month | quarter | year
        // rules: [{ required: true, message: '请选择日期!'}]
      },
      {
        name: "timePicker",
        label: "时间",
        formType: "timePicker",
      },
      // {
      //   name: "rangePicker",
      //   label: "日期区间",
      //   formType: "rangePicker",
      //   showTime: true,
      //   // placeholder: ['开始时间', '结束时间']
      //   // picker: 'week', // week | month | quarter | year
      //   // rules: [{ required: true, message: '请选择日期区间!'}]
      // },
    ],
  };

  // 搜索按钮组
  const searchFormMenuSlot = (
    <span>
      <Button type="primary" htmlType="submit">
        查询
      </Button>
      <Button
        style={{ marginLeft: "20px" }}
        htmlType="button"
        onClick={(e) => reset()}
      >
        重置
      </Button>
    </span>
  );

  const queryFinish = (values) => {
    console.log("搜索", values);
  };
  const reset = () => {
    searchForm.resetFields();
  };

  // 表单配置
  const formSetting = {
    span: 8,
    // menuPosition: 'right',
    columns: [
      {
        name: "username",
        label: "用户名",
        placeholder: "请输入用户名",
        allowClear: true,
        // slot: true,
        // component: <DatePicker style={{ width: "100%" }} />,
        rules: [{ required: true, message: "请输入用户名!" }],
        // disabled: true,
      },
      {
        name: "phone",
        label: "手机号",
        placeholder: "请输入手机号",
        formType: "input",
        // rules: [{ required: true, message: '请输入手机号!'}]
      },
      {
        name: "city",
        label: "城市",
        formType: "select",
        // multiple: true,
        showSearch: true,
        rules: [{ required: true, message: "请选择城市!" }],
        dicData: [
          { value: "nanjing", label: "南京" },
          { value: "shanghai", label: "上海" },
          { value: "beijing", label: "北京" },
        ],
        slot: true,
        component: (
          <Select
            placeholder="请选择"
            allowClear
            options={[
              { value: "nanjing", label: "南京" },
              { value: "shanghai", label: "上海" },
              { value: "beijing", label: "北京" },
            ]}
            onChange={(e) => onchange(e)}
          />
        ),
        // disabled: true,
      },
      {
        name: "campany",
        label: "部门",
        formType: "select",
        dicData: [
          { value: "zongcaiban", label: "总裁办" },
          { value: "qihuabu", label: "企划部" },
          { value: "renshibu", label: "人事部门" },
        ],
        disPlay: !username || username == "nanjing" ? "block" : "none",
      },
      {
        name: "sex",
        label: "性别",
        formType: "radio",
        dicData: [
          { value: "1", label: "男" },
          { value: "0", label: "女" },
        ],
        rules: [{ required: true, message: "请选择性别!" }],
        // optionType: 'button',
        // buttonStyle: 'solid'
      },
      {
        name: "isOpen",
        label: "开关",
        formType: "switch",
        defaultChecked: false,
        checkedChildren: <CheckOutlined />,
        unCheckedChildren: <CloseOutlined />,
        valuePropName: "checked", // 需要指定checked
      },
      {
        name: "isCascader",
        label: "级联选择",
        formType: "cascader",
        dicData: [
          {
            value: "zhejiang",
            label: "Zhejiang",
            children: [
              {
                value: "hangzhou",
                label: "Hangzhou",
                children: [
                  {
                    value: "xihu",
                    label: "West Lake",
                  },
                ],
              },
            ],
          },
          {
            value: "jiangsu",
            label: "Jiangsu",
            children: [
              {
                value: "nanjing",
                label: "Nanjing",
                children: [
                  {
                    value: "zhonghuamen",
                    label: "Zhong Hua Men",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        name: "datePicker",
        label: "日期时间",
        formType: "datePicker",
        allowClear: true,
        showTime: true,
        // picker: 'week', // week | month | quarter | year
        // rules: [{ required: true, message: '请选择日期!'}]
      },
      {
        name: "timePicker",
        label: "时间",
        formType: "timePicker",
      },
      {
        name: "rangePicker",
        label: "日期区间",
        formType: "rangePicker",
        showTime: true,
        // placeholder: ['开始时间', '结束时间']
        // picker: 'week', // week | month | quarter | year
        // rules: [{ required: true, message: '请选择日期区间!'}]
      },

      {
        name: "desc",
        label: "描述",
        formType: "textarea",
        row: true,
        allowClear: true,
        // maxLength: 10,
      },
    ],
  };

  // 表单按钮组
  const formMenuSlot = (
    <span>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
      <Button
        style={{ marginLeft: "20px" }}
        htmlType="button"
        onClick={(e) => handleReset()}
      >
        重置
      </Button>
    </span>
  );

  // 只读表单配置
  const readonlyFormSetting = {
    span: 8,
    border: true,
    space: true,
    labelWidth: 120,
    labelAlign: "center",
    // labelBackground: true,
    // labelColor: '#000',
    columns: [
      {
        name: "username",
        label: "用户名",
        // slot: true,
        ellipsis: true,
        lineClamp: 2,
        component: (
          <Input onChange={(e) => onChange(e)} value={readonlyForm.username} />
        ),
      },
      { name: "nickname", label: "昵称" },
      { name: "phone", label: "手机号" },
      { name: "desc", label: "描述", row: true },
    ],
  };

  function onChange(e) {
    setReadonlyForm({
      ...readonlyForm,
      username: e.target.value,
    });
  }

  useEffect(() => {
    form.setFieldsValue({
      isCascader: ["zhejiang", "hangzhou", "xihu"],
    });

    setReadonlyForm({
      username:
        "这是一个很长的文本   示例，应该显示为   省略号,这是一个很长的文本示例，应该显示为省略号",
      phone: "15853932323",
    });
  }, []);

  const submitFinish = (values) => {
    console.log("values", values);
  };

  const handleReset = () => {
    form.resetFields();
    // form.setFieldsValue({
    //     sex: '0'
    // })
  };

  const onchange = (e) => {
    console.log("e", e);
    setUsername(e);
    if (e !== "nanjing") {
      form.setFieldsValue({
        campany: "",
      });
    }
  };

  // 树数据
  const initTreeData: DataNode[] = [
    {
      title: "Expand to load",
      key: "0",
      children: [
        {
          title: "Expand to load",
          key: "4",
          children: [
            {
              title: "Expand to load1",
              key: "4-1",
              children: [{ title: "范伟东", key: "4-2" }],
            },
          ],
        },
        {
          title: "Expand to load",
          key: "1",
          children: [{ title: "范伟东", key: "1-1" }],
        },
        {
          title: "Expand to load",
          key: "3",
          children: [{ title: "xxxx", key: "3-1" }],
        },
        { title: "Tree Node", key: "2", isLeaf: true },
        { title: "mmmm", key: "5", isLeaf: true },
      ],
    },
  ];

  function onHandleCheckAllChange(data, node) {
    // console.log("onHandleCheckAllChange", data, node);
    setCheckedTree(data);
  }
  function handleTreeClick() {
    console.log("========", checkedTree);
  }

  // 树数据按钮组
  const menuTreeNode = (data) => (
    <Space>
      <a
        onClick={(e) => handleCustomTreeAdd(data)}
        style={{ color: "#1677ff" }}
      >
        新增
      </a>
      <a
        onClick={(e) => handleCustomTreeDel(data)}
        style={{ color: "#ff4D4F" }}
      >
        删除
      </a>
    </Space>
  );

  const handleCustomTreeAdd = (data) => {
    console.log("handleCustomTreeAdd", data);
  };
  const handleCustomTreeDel = (data) => {
    console.log("handleCustomTreeDel", data);
  };

  const onChangePage = (pageNum, pageSize) => {
    console.log(pageNum, pageSize);
  };

  // 分页配置
  const paginationSetting = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultCurrent: 1,
    // defaultPageSize: 20,
    pageSizeOptions: [10, 20, 30, 50, 80],
    total: 80,
    align: "left",
  };

  const [isModal, setIsModal] = useState({
    isModalStatus: false,
    isModalTitle: "open",
  });

  const formRef = useRef();
  const handleOPenDialog = () => {
    setIsModal({
      isModalTitle: "open",
      isModalStatus: true,
    });
  };

  const handleModalCancel = (data) => {
    setIsModal(data);
  };

  const handleOk = () => {
    setIsModal({ isModalStatus: false, isModalTitle: "" });
  };

  // 弹窗按钮组
  const footerMenu = [
    <Button key="cancel" onClick={handleModalCancel}>
      取消
    </Button>,
    <Button key="store" type="primary" onClick={handleOk}>
      暂存
    </Button>,
    <Button key="submit" type="primary" onClick={handleOk}>
      确定
    </Button>,
  ];

  const contentSlot = <Input />;

  const descriptionMenu = (
    <span>
      <a>暂无数据</a>
    </span>
  );

  return (
    <div className="addComponent pageWarpper">
      <p style={{ marginBottom: "10px" }}>搜索组件</p>
      <SearchFormWarpper
        searchFormSetting={searchFormSetting}
        searchFormMenuSlot={searchFormMenuSlot}
        handlequeryFinish={queryFinish}
        searchForm={searchForm}
      />
      <Divider />
      <p style={{ marginBottom: "10px" }}>表单组件</p>
      <FormWarpper
        formSetting={formSetting}
        formMenuSlot={formMenuSlot}
        handleFinish={submitFinish}
        form={form}
      />
      <Divider />
      <p style={{ marginBottom: "10px" }}>只读表单组件</p>
      <ReadonlyFormWarpper
        readonlyFormSetting={readonlyFormSetting}
        readonlyForm={readonlyForm}
      />
      <Divider />
      <p style={{ marginBottom: "10px" }}>树形组件</p>
      <Button
        type="primary"
        htmlType="button"
        onClick={(e) => handleTreeClick()}
      >
        提交
      </Button>
      <TreeWarpper
        defaultExpandAll
        initTreeData={initTreeData}
        toggleAll
        checkable
        menuTreeSlot
        onHandleCheckAllChange={onHandleCheckAllChange}
        menuTreeNode={menuTreeNode}
      />

      <Divider />
      <p style={{ marginBottom: "10px" }}>分页组件</p>
      <PaginationWarpper
        paginationSetting={paginationSetting}
        onChangePage={onChangePage}
      />

      <Divider />
      <p style={{ marginBottom: "10px" }}>弹窗组件</p>
      <Button type="primary" onClick={handleOPenDialog}>
        open
      </Button>
      {isModal.isModalStatus && (
        <ModalDialog
          isModal={isModal}
          formRef={formRef}
          footerMenu={footerMenu}
          handleModalCancel={handleModalCancel}
          contentSlot={contentSlot}
        />
      )}

      <Divider />
      <p style={{ marginBottom: "10px" }}>空状态组件</p>
      <EmptyWarpper descriptionMenu={descriptionMenu} />
    </div>
  );
};

export default AddComponent;
